<template>
  <div>
    <el-row style="display: flex;justify-content: center;">
      <el-col :span="8">
        <div class="xw-block" style="height: 600px;">
          <el-form style="padding: 35px">
            <!--用户头像-->
            <el-form-item style="text-align: center;">
              <el-upload
                  class="avatar-uploader"
                  :action="baseUrl + '/file/upload'"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess">
                <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <div style="height: 260px;overflow-y: scroll">
              <!--用户昵称-->
              <el-form-item label="昵称">
                <el-input style="width: 85%" v-model="form.nickName"></el-input>
              </el-form-item>

              <!--用户邮箱-->
              <el-form-item label="邮箱" v-if="form.role === 'ROLE_USER' || form.role === 'ROLE_ADMIN'||form.role === 'ROLE_TEACHER'">
                <el-input style="width: 85%"  v-model="form.email"></el-input>
              </el-form-item>

              <!--用户年龄-->
              <el-form-item label="年龄" v-if="form.role === 'ROLE_USER' || form.role === 'ROLE_ADMIN'||form.role === 'ROLE_TEACHER'">
                <el-input style="width: 85%"  type="number" v-model="form.age"></el-input>
              </el-form-item>

              <!--用户手机号-->
              <el-form-item label="电话">
                <el-input style="width: 85%"  v-model="form.phone"></el-input>
              </el-form-item>

              <el-form-item label="纬度" v-if="form.role === 'ROLE_MOVIE'">
                <el-input style="width: 85%"  placeholder="填写纬度" v-model="form.userMovie.lat"></el-input>
              </el-form-item>
              <el-form-item label="经度" v-if="form.role === 'ROLE_MOVIE'">
                <el-input style="width: 85%"  placeholder="填写经度" v-model="form.userMovie.lng"></el-input>
              </el-form-item>
              <el-form-item label="" v-if="form.role === 'ROLE_MOVIE'" style="text-align: left;padding-left: 40px;">
                <el-link @click="coordinatePicking">坐标拾取器</el-link>
              </el-form-item>
              <el-form-item label="地址" v-if="form.role === 'ROLE_MOVIE'">
                <el-input style="width: 85%"  placeholder="填写地址" type="textarea" :rows="4" v-model="form.userMovie.address"></el-input>
              </el-form-item>
            </div>

          </el-form>
          <div style="width: 100%;text-align: center">
            <el-button type="primary" style="width: 80%" @click="updatePersonInfo">确认修改</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      baseUrl: ''
    }
  },
  mounted() {
    this.getPersonInfo()
    this.baseUrl = this.baseURL()
  },
  methods: {
    coordinatePicking() {
      window.open("https://jingweidu.bmcx.com/")
    },
    updatePersonInfo() {
      this.request.post("/web/updatePersonInfo",this.form).then(res => {
        if (res.code === '200') {
          this.getPersonInfo()
          this.messageSuccess("修改成功")
          // 更新缓存的信息
          let user = JSON.parse(localStorage.getItem("user"))
          user.imageUrl = this.form.imageUrl
          user.nickName = this.form.nickName
          localStorage.setItem("user",JSON.stringify(user))
        } else {
          this.messageError(res.msg)
        }
      })
    },
    getPersonInfo() {
      this.request.get("/web/getPersonInfo").then(res => {
        if (res.code === '200') {
          this.form = res.data
        }
      })
    },
    handleAvatarSuccess(e) {
      console.log("handleAvatarSuccess",e)
      if (e.code === '200') {
        this.form.imageUrl = e.data
      }
    }
  }
}
</script>